import React,{Component} from 'react';
import {addEquipment} from '../page/main/3d/editor/ctrl';
class AddDevice extends Component{
    constructor(props){
        super(props);
        this.state = {
        }
    }
    render(){
        return(
            <>
                <div className="add_thing">
                    <div className="add_title">
                        <span>添加设备</span>
                        <img src={require('../page/main/visualSystem/img/cancel.jpg')} alt=""/>
                    </div>
                    <div>
                        <ul className="device_list">
                        {
                            this.props._this.state.deviceData.map((item)=>(
                                <li key={item.id} onClick={ () => { this.selectDevice(item) }}>
                                    <div className={`device_icon ${item.selected === true?'selected':'not_select'}`}>
                                        <img src={item.icon} alt=""/>
                                    </div>
                                    <p>{item.val}</p>
                                </li>
                            ))
                        }
                        </ul>
                    </div>
                </div>
            </>
        )
    }
    selectDevice(item){
        let {id,val} = item;
        addEquipment(val);
        let newdeviceData = JSON.parse(JSON.stringify(this.props._this.state.deviceData));
        newdeviceData[id-1].selected = !newdeviceData[id-1].selected;
        this.props._this.setState({
            deviceData:[...newdeviceData]
        })
    }
}
export default AddDevice;